import React from 'react';
import { Form, Input, Button, Tabs, Checkbox, Image } from 'antd';
import { Link } from 'umi';
import styles from '@/assets/css/login.less';

import {
  UserOutlined,
  LockOutlined,
  PhoneOutlined,
  MailOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
export default function Log(props) {
  return (
    <>
      <Tabs centered>
        <TabPane tab="账户密码登录" key="tab-1">
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={props.onFinish}
            onFinishFailed={props.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
                props.verify,
              ]}
            >
              <Input
                size="large"
                className={styles.username}
                prefix={<UserOutlined />}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}
            >
              <Input.Password
                size="large"
                className={styles.password}
                prefix={<LockOutlined />}
              />
            </Form.Item>

            <Form.Item>
              <Button
                className={styles.loginBtn}
                type="primary"
                htmlType="submit"
                size="large"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </TabPane>
        <TabPane tab="手机号登录" key="tab-2">
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={props.onFinish}
            onFinishFailed={props.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="phone"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input
                size="large"
                className={styles.username}
                prefix={<PhoneOutlined />}
              />
            </Form.Item>

            <Form.Item
              className={styles.codeCon}
              name="code"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Input.Password
                size="large"
                className={styles.password}
                prefix={<MailOutlined />}
              />
              <Button className={styles.getCode}>获取验证码</Button>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </TabPane>
      </Tabs>
      <div className={styles.jump}>
        <Link>注册账户</Link>
        <Link onClick={props.changeToLog}>商家入驻</Link>
      </div>
    </>
  );
}
